<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联盟知家</title>
<link type="text/css" rel="stylesheet" href="${base}/foreground/css/bootstrap.css" >
<link type="text/css" rel="stylesheet" href="${base}/foreground/css/bootstrap.min.css" >
<link type="text/css" rel="stylesheet" href="${base}/foreground/css/popuo-box.css"   media="all"/>
<link type='text/css' rel='stylesheet' href="${base}/foreground/css/style.css" />
<style type="text/css">
	.carousel-inner>.item>img{
		width: 1100px;
		height:500px;
	}
	.nav>li>a:focus,.nav>li>a:hover{
		background-color:#000000;
	}
	.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{
		background-color: #000000;
	} 
	.navbar-nav>li>.dropdown-menu{
		background-color: #000000;
	}
	.dropdown-menu>li>a{
		color:#fff;
	}
	#current_user{
		color: #fff;
	}
	.caret{
		color: #fff;
	}
	.modal-body table>tbody>tr>td{
		    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
    cursor: pointer;
	}
</style>

</head>
<body >
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.html"><img src="${base}/foreground/images/logo.png" alt=""></a>
		</div>
	
		<div class="navigation">
			<ul class="navig cl-effect-3" style="float:left; width:400px">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li><a href="${base }/foreground/hero.jsp">英雄资料</a></li>
				<li><a href="${base }/foreground/blog.jsp">联盟论坛</a></li>
				<li><a href="${base }/foreground/index.jsp">关于</a></li>
			</ul>
			<c:choose>
				<c:when test="${sessionScope.userName==null}">
					<ul class="navig cl-effect-3" style="float:right; width:200px">
						<li><a href="${base }/loginsystem/index.jsp">登录OR注册</a></li>
					</ul>
				</c:when>
				<c:otherwise>
						<div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown" role="button" aria-haspopup="true"
									aria-expanded="false"><span id="current_user"><img
											src="${sessionScope.userPic }" style="width: 40px;height: 40px;border-radius: 50%">${sessionScope.userName}</span>
										<span class="caret"></span></a>
									<ul class="dropdown-menu" style="cursor: pointer"><!-- 放在了每个前端页面中 -->
										<li><a data-toggle="modal" data-target="#myInfo">个人信息</a></li>
										<li><a data-toggle="modal" data-target="#myArticle">我的文章</a></li>
										<li><a data-toggle="modal" data-target="#modifyPassword">修改密码</a></li>
										<li role="separator" class="divider"></li>
										<li><a href="${base }/action/login/exit?id=1">退出登录</a></li>
									</ul></li>
							</ul>
						</div>
					</c:otherwise>
			</c:choose>
		</div>
	</div>
</div>
<div style="background: url(${base}/foreground/images/kda.jpg) no-repeat;background-size:100% 100%">
<div id="myCarousel" class="carousel slide" style="width: 80%;  margin: 0 auto; ">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="${base}/foreground/images/banner.jpg" alt="First slide">
            <div class="carousel-caption">海滩假日</div>
        </div>
        <div class="item">
            <img src="${base}/foreground/images/newL.jpg" alt="Second slide">
            <div class="carousel-caption">周年庆</div>
        </div>
        <div class="item">
            <img src="${base}/foreground/images/hks.jpg" alt="Third slide">
            <div class="carousel-caption">海克斯科技</div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div>

<div class="gallery">
	<div class="container">
		<h3>阵容推荐</h3>
		<div class="gallery-top">
					<div id="portfoliolist">
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="${base }/foreground/images/pic1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  		</div></a>
		                </div>
					</div>				
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="${base }/foreground/images/pic2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>		
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="${base }/foreground/images/pic3.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>				
					<div class="portfolio logos mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="${base }/foreground/images/pic4.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>	
					<div class="portfolio card1 mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="${base }/foreground/images/pic5.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>			
				</div>

		</div>
	</div>
</div>

<!-- Video Part starts Here -->
<div class="video-serch">
	<div class="container">
		<div class="col-md-6 vid-col">
			<p>小学期项目介绍视频</p>
		</div> 
		<div class="col-md-6 vid-coll">
			<img src="${base }/foreground/images/vid-img.jpg" alt="">
			<div class="play-but">
				<a href="#small-dialog5" class="thickbox play-icon popup-with-zoom-anim"><img src="${base }/foreground/images/vid-play.png" alt="" /></a>
			</div>
			<!--pop-up-box-->
				
			<!--pop-up-box-->
			<div id="small-dialog5" class="mfp-hide">
					<iframe src="http://player.bilibili.com/player.html?aid=6117110&cid=9931722&page=1"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
				</div>
				 <script>
						
				</script>
		</div>
		<div class="clearfix"></div>
	</div>	
</div>

<!-- What New Part starts Here -->
<div class="what-new">
	<div class="container">
		<h3>版本更新</h3>
		<div class="blog-news">
			<div class="blog-news-grid">
				<div class="news-grid-left">
					<h4>06</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>最新资讯请浏览英雄联盟官方网站</h4>
					<p>军队用法术和符文武装自己，英雄们打造出大部分魔法物品率领部队彼此厮杀。召唤者，瓦罗兰大陆的实际领导者们，他们疯狂使用魔法能量攻击敌人的部队和支持者。他们拥有近乎无限的原始魔法力量使用，从未考虑过无止境的滥用魔法会给这片大陆的环境带来怎么样的灾难。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="blog-news-grid b_n_g">
				<div class="news-grid-left">
					<h4>28</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>最新资讯请浏览英雄联盟官方网站</h4>
					<p>军队用法术和符文武装自己，英雄们打造出大部分魔法物品率领部队彼此厮杀。召唤者，瓦罗兰大陆的实际领导者们，他们疯狂使用魔法能量攻击敌人的部队和支持者。他们拥有近乎无限的原始魔法力量使用，从未考虑过无止境的滥用魔法会给这片大陆的环境带来怎么样的灾难。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="blog-news b_n">
			<div class="blog-news-grid">
				<div class="news-grid-left">
					<h4>21</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>最新资讯请浏览英雄联盟官方网站</h4>
					<p>军队用法术和符文武装自己，英雄们打造出大部分魔法物品率领部队彼此厮杀。召唤者，瓦罗兰大陆的实际领导者们，他们疯狂使用魔法能量攻击敌人的部队和支持者。他们拥有近乎无限的原始魔法力量使用，从未考虑过无止境的滥用魔法会给这片大陆的环境带来怎么样的灾难。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="blog-news-grid b_n_g">
				<div class="news-grid-left">
					<h4>05</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>最新资讯请浏览英雄联盟官方网站</h4>
					<p>军队用法术和符文武装自己，英雄们打造出大部分魔法物品率领部队彼此厮杀。召唤者，瓦罗兰大陆的实际领导者们，他们疯狂使用魔法能量攻击敌人的部队和支持者。他们拥有近乎无限的原始魔法力量使用，从未考虑过无止境的滥用魔法会给这片大陆的环境带来怎么样的灾难。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>

<!-- 显示个人信息的模态框 -->
	<div class="modal fade" id="myInfo" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的个人信息</h4>
					</div>
					<div class="modal-body" style="height: 280px">
						<iframe id="userInformation" width="100%" height="100%" frameborder="0" src="${base}/foreground/person_form.jsp"></iframe>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="closeWin">关闭</button>
						<button type="button" class="btn btn-primary" id="subIframe">更改信息</button>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
<!-- 显示我的文章模态框 -->
	<div class="modal fade" id="myArticle" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style=" top: 35%;left: 40%;
            transform: translate(-50%,-50%);
             min-width:60%;
             overflow: visible;">
		<div class="modal-dialog" style="width: 1000px" >
			<div class="modal-content" >
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的文章</h4>
					</div>
					<div class="modal-body" style="height: 500px">
						<iframe id="article_list" width="100%" height="100%" frameborder="0" src="${base}/foreground/article_list.jsp"></iframe>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 修改密码模态框 -->
	<div class="modal fade" id="modifyPassword" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
				<form action="${base}/action/user/modPassword" method="post" autocomplete="off" draggable="false" id="modPassword">
					<input type="hidden" name="id" value="${sessionScope.userId }">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%">
							<tbody>
								<tr>
									<td width="30%">输入当前密码:</td>
									<td width="70%"><input type="password" class="form-control" name="oldPassword" id="oldPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">输入新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="newPassword" id="newPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">确认新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="passwordAgain" id="passwordAgain">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="checkPassword()">提交更改</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<script type="text/javascript" src="${base}/foreground/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${base}/foreground/js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="${base}/foreground/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}/foreground/js/modernizr.custom.53451.js"></script>  
<script type="text/javascript" src="${base}/foreground/js/jquery.magnific-popup.js"></script>
<script type="text/javascript">

	$(function () {
		<% session.setAttribute("userPassword",14);%>
	$("#subIframe").click(function(){
		$("#userInformation").contents().find("#lay-form-submit").click();
	});
	$( "span.menu" ).click(function() {
		  $( ".navigation" ).slideToggle( "slow", function() {
		    // 完成动画效果.
		  });
		});
	$(document).ready(function() {
		$('.popup-with-zoom-anim').magnificPopup({
			type: 'inline',
			fixedContentPos: false,
			fixedBgPos: true,
			overflowY: 'auto',
			closeBtnInside: true,
			preloader: false,
			midClick: true,
			removalDelay: 300,
			mainClass: 'my-mfp-zoom-in'
		});
																		
		});
	
	var filterList = {
		init: function () {
			// MixItUp插件
			// 
			$('#portfoliolist').mixitup({
				targetSelector: '.portfolio',
				filterSelector: '.filter',
				effects: ['fade'],
				easing: 'snap',
				// 调用悬停效果
				onMixEnd: filterList.hoverEffect()
			});				
		
		},
		
		hoverEffect: function () {
		
			// 简单的视差效果  阵容推荐里的。
			$('#portfoliolist .portfolio').hover(
				function () {
					$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
					$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
				},
				function () {
					$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
					$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
				}		
			);				
		
		}

	};
	
	// 运行效果
	filterList.init();
	
	
});	
	function checkPassword() {
		var oldpwd=$("#oldPassword").val();
		var newpwd=$("#newPassword").val();
		var confirmpwd=$("#passwordAgain").val();
		if(${sessionScope.userPassword!=null}){
			var truepwd=${sessionScope.userPassword};
		}
		
		if(oldpwd==""){
			alert("请输入原密码！");
		}else if(newpwd==""){
			alert("请输入新密码！");
		}else if(confirmpwd==""){
			alert("请确认新密码！");
		}else if(oldpwd!=truepwd){
			alert("原密码错误，请重新输入！");
		}else if(newpwd!=confirmpwd){
			alert("密码不一致，请重新输入！");
		}else if(newpwd.length<6){
			alert("密码不等少于6位！");
		}else if(newpwd.length>=15){
			alert("密码不能大于15位！");
		}else{
			$("#modPassword").submit();
		}
	}
</script>
</html>